<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    html {
        height: 100%;
    }

    body {
        height: 100%;
        margin: 0;
        position: relative;
        overflow: hidden;
    }

    #box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #scroll {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
</style>
<script>
    document.addEventListener (
        "touchstart",
        function(e) {
            e.preventDefault();
        }
    )
    window.onload = function () {
        var box = document.querySelector("#box");
        var scroll = document.querySelector("#scroll");
        var startPoint = 0;
        var startEI = 0;
        var maxTop = box.clientHeight - scroll.offsetHeight;
        box.addEventListener(
            "touchstart",
            function (e) {
                var touch = e.changedTouches[0];
                startPoint = touch.pageY;
                console.log(startPoint);
                startEI = scroll.offsetTop;
            }
        );
        box.addEventListener(
            "touchmove",
            function (e) {
                var touch = e.changedTouches[0];
                var nowPoint = touch.pageY;
                var dis = nowPoint - startPoint;
                var top = startEI + dis;
                if(top > 0){
                    top = 0;
                }
                if(top <maxTop){
                    top=maxTop;
                }
                scroll.style.top =top + "px";
            }
        )
    }
</script>

<body>
    <div id="box">
        <div id="scroll">
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
            哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈<br />
        </div>
    </div>
</body>

</html>